<template>
<div>
    <div>
      <el-table
          :data="tableData"
          style="width: 100%;margin-bottom: 20px;"
          row-key="id"
          border
          :tree-props="{children: 'children', hasChildren: 'hasChildren'}">
        <el-table-column
            prop="id"
            label="id"
            sortable
            width="180">
        </el-table-column>

        <el-table-column
            prop="name"
            label="分类名称"
            sortable
            width="360">
        </el-table-column>
        <el-table-column
            prop="orders"
            label="分类排序"
            sortable
            width="180">
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button
                size="mini"
                @click="add(scope.$index, scope.row)">新增</el-button>
            <el-button
                size="mini"
                @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
            <el-button
                size="mini"
                type="danger"
                @click="handleDelete(scope.$index, scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
  </div>
  <div>
<!--新增的表单-->
    <el-dialog title="添加分类" :visible.sync="dialogFormVisible">
      <el-form :model="categoryForm">
        <el-form-item label="分类名称" :label-width="formLabelWidth">
          <el-input v-model="categoryForm.name" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="排序规则" :label-width="formLabelWidth">
          <el-input v-model="categoryForm.orders" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="submitForm()">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</div>
</template>

<script>
export default {
  name: "CategoryList",
  data() {
    return {
      tableData: [],
      dialogFormVisible: false,
      categoryForm: {
        name: '',
        orders:'',
        pid:''
      },
      formLabelWidth: '120px'
    }
  },
  methods: {
    handleDelete(index,row){

    },
    handleEdit(index,row){

    },
    add(index,row){
      this.dialogFormVisible=true;
      this.categoryForm.pid=row.id;//要添加数据的pid一定得是传过来数据的id
    },
    submitForm(){
      this.axios.post("http://localhost:8083/goods/addCategory",this.categoryForm).then(resp=>{
        if(resp.data=="success"){
          alert("添加分类成功!!")
          //关闭对话框
          this.dialogFormVisible=false;
          //刷新列表
          this.initCategoryData();
        }
      })
    },
    initCategoryData(){
      this.axios.get("http://localhost:8083/goods/categorys").then(resp=>{
        this.tableData=resp.data;
        console.log(this.tableData)
      })
    }
  },
  created() {
    this.initCategoryData();
  }
}
</script>

<style scoped>

</style>